<template>
  <div class="app-container">
    <div>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>账号列表</el-breadcrumb-item>
      </el-breadcrumb>

    </div>

    <div style="margin-top: 10px">

      <el-input
          v-model="searchQuery"
          style="width: 240px;height: 32px"
          size="large"
          placeholder="搜索关键字"
          :suffix-icon="Search"
          @keyup.enter="search"
          label="用户名"
          aria-label="用户名1"
      />
      <el-button style="margin-left: 30px" type="primary" @click="addUser">新建用户</el-button>
    </div>
    <div style="width: 100vw; background-color: antiquewhite">
      <el-table :data="tableData" style="width: 100%" height="250">
        <el-table-column fixed prop="userName" label="姓名" width="120"/>
        <el-table-column prop="email" label="邮箱" width="300"/>
        <el-table-column prop="mobile" label="电话" width="150"/>
        <el-table-column prop="roleName" label="角色" width="120"/>
        <el-table-column prop="state" label="状态" width="120">
          <template #default="scope">
            状态{{ scope.row.state }}
            <el-switch v-model="scope.row.state"/>

          </template>

          <!--          <template #default="scope">-->
          <!--            状态{{scope.row}}-->
          <!--            <el-switch v-model="scope.row.mgState"  />-->
          <!--          </template>-->
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize4"
          :page-sizes="pageSizeSelect"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  <div >

    <el-dialog v-model="dialogOverflowVisible" title="创建用户" width="500" >
      <el-form :model="registerData" :rules="rules" ref="ruleFormRef">
        <el-form-item prop="userName" label="用户名" label-width="100px" required>
          <el-input  v-model="registerData.userName" autocomplete="off" />
        </el-form-item>
        <el-form-item  prop="passWord" label="密码" label-width="100px" >
          <el-input v-model="registerData.passWord" autocomplete="off" />
        </el-form-item>
        <el-form-item   prop="confirmPassWord" label="确认密码" label-width="100px" >
          <el-input v-model="registerData.confirmPassWord" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱" label-width="100px" >
          <el-input v-model="registerData.email" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="mobile"  label="电话" label-width="100px" >
          <el-input v-model="registerData.mobile" autocomplete="off" />
        </el-form-item>
      </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogOverflowVisible = false">关闭</el-button>
              <el-button type="primary" @click="submit(ruleFormRef)">
                确认
              </el-button>
            </div>
          </template>

    </el-dialog>
  </div>
  </div>

</template>
<script setup>
import {reactive, ref, onMounted} from 'vue'
import {ArrowRight} from '@element-plus/icons-vue'
import {Search} from '@element-plus/icons-vue'
import {getUserList, register} from "../../api/request.js";
const currentPage = ref(1)
const pageSize4 = ref(20)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref(0);
const pageSizeSelect = ref([20,40,60,80,100])
const pageIndex = ref(1);
const pageSize =ref(20)
const searchQuery =ref("")
const dialogOverflowVisible =ref(false)
const userName =ref("用户名")
const form= reactive({
  userName:""
})
const ruleFormRef =ref(null);
const registerData=ref({
  userName:"",
  passWord:"",
  confirmPassWord:"",
  email:"",
  mobile:""
})




const validateTest= (rule, value, callback) => {
  if (value.trim() === '') {
    callback(new Error("姓名不可为空"))
  } else {
    return callback();
  }
}


const validateUserName = (rule, value, callback) => {
  if (value.trim() === '') {
    callback(new Error("姓名不可为空"))
  } else {
    return callback();
  }
}
const validatePassWord = (rule, value, callback) => {
  if (value.trim() === '') {
    callback(new Error("密码不可为空"))
  } else {

    return callback();
  }
}
const validateConfirmWord = (rule, value, callback) => {
  if (value.trim() === '') {
    callback(new Error("密码不可为空"))
  } else {

    return callback();
  }
}
const validateEmail = (rule, value, callback) => {
  if (value.trim() === '') {
    callback(new Error("邮箱不可为空"))
  } else {

    return callback();
  }
}

const validateMobile = (rule, value, callback) => {
  if (value.trim() === '') {
    callback(new Error("电话不可为空"))
  } else {

    return callback();
  }
}

const rules = reactive({
  userName : [ {validator: validateTest, trigger: 'blur',required:true}],
  passWord : [ {validator: validatePassWord, trigger: 'blur',required:true}],
  confirmPassWord : [ {validator: validateConfirmWord, trigger: 'blur',required:true}],
  email : [ {validator: validateEmail, trigger: 'blur',required:true}],
  mobile : [ {validator: validateMobile, trigger: 'blur',required:true}],
})

const submit=(formEl)=>{
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log("验证成功"+ JSON.stringify(registerData.value)  )
      register(registerData.value)
    } else {
      console.log('验证失败')
    }
  })
}



const search =()=>{
  getUserListPromise(1,pageSize.value,searchQuery.value)
}

//基本数据 ref  reactive 对象或数组
// const tableData= reactive([])
let tableData = ref([])
onMounted(() => {
  getUserListPromise(pageIndex.value,pageSize.value,searchQuery.value)
})
const addUser = () => {
dialogOverflowVisible.value = true
}

const getUserListPromise=(pageIndex,pageSize,searchQuery)=>{
  getUserList(pageIndex, pageSize,searchQuery).then(res => {
    res.data.info.list.forEach(item=>{
      item.state = item.mgState==0?false:true
    })
    tableData.value = res.data.info.list
    total.value =res.data.info.total
  })
}

const handleSizeChange = (number)=>{
  console.log("handleSizeChange"+number)
  pageSize.value =number
  getUserListPromise(1,number,searchQuery.value)
}

const handleCurrentChange = (number)=>{

  getUserListPromise(number, pageSize.value,searchQuery.value)
}
</script>

<style>
.el-form-item__label{
  color: #000000;
}

</style>